import superr from '@/common/components/superr.js'
export default class form extends superr {
  labelWidth = 110 //定义表单项的标题宽度
  customClass = '' //定义表单整体的类
  inlineMessage = false //验证信息在行尾显示
  disabled = false
  //表单示例
  options = {
    /**
     * 通用配置
     * vertical:true-表单label在上面不是左边,false-左边
     * lineClass:自定义整行的类名，可以使用公共样式
     * lineStyle:自定义整行的样式
     * class:自定义单独组件的类名，可以使用公共样式
     * style:自定义单独组件的样式
     * show:隐藏或者展示
     * label:表单项的标题字段
     * required:true-必填项
     * 独立配置-参考下面示例
     */
    check: {
      type: 'check',
      label: '勾选框',
      labelSlot: data => {
        return `<div class='cpt_btn_ico icon-a-svg73'>${data.current.label}</div>`
      },
    },
    label: {
      type: 'label',
      label: '纯展示/自定义',
      position: 'center', //left,center,right
      default: '纯展示/自定义',
      lineClass: 'lineClass',
      class: 'cpt_grey_background',
    },
    input: {
      type: 'input',
      label: data => {
        return `输入框${data.current.formIndex}`
      },
      limit: true,
      required: true,
      password: true,
      suffixIcon: 'el-icon-search',
      lineStyle: { display: 'inline-block', width: '95%' },
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请输入'))
            } else {
              callback()
            }
          },
        },
      ],
      change: function (data) {
        // debugger
      },
    },
    wenhao: {
      type: 'label',
      vertical: true,
      position: 'center', //left,center,right
      lineStyle: { display: 'inline-block', width: '5%', 'margin-left': '10px' },
    },
    inputNumber: {
      type: 'inputNumber',
      label: '输入数字',
      required: true,
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请输入数字'))
            } else {
              callback()
            }
          },
        },
      ],
      change: function (data) {
        // debugger
      },
    },
    autocomplete: {
      type: 'autocomplete',
      label: '下拉输入框',
      required: true,
      labelKey: 'label',
      valueKey: 'value',
      rows: 1,
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请输入'))
            } else {
              callback()
            }
          },
        },
      ],
      query: function (data) {
        if (data.current.queryString === 'a') {
          setTimeout(() => {
            data.current.cb([
              { id: 1, label: '22', value: '33' },
              { id: 2, label: '222', value: '333' },
            ])
          }, 100)
        } else {
          setTimeout(() => {
            data.current.cb([
              { id: 1, label: 'asdasd', value: '12312321' },
              { id: 2, label: 'asdasd2', value: '45645645' },
            ])
          }, 100)
        }
      },
      input: function (data) {
        // debugger
      },
      change: function (data) {
        // debugger
      },
      enter: function (data) {
        // debugger
      },
    },
    select: {
      type: 'select',
      label: '选择框1',
      required: true,
      // style: { width: '150px' },
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请选择'))
            } else {
              callback()
            }
          },
        },
      ],
      multiple: true,
      filterable: true,
      options: [
        { id: 1, lab: 'qwe1' },
        { id: 2, lab: 'qwe2' },
        { id: 3, lab: 'qwe3' },
        { id: 4, lab: 'qwe4' },
      ],
      prop: { label: 'lab', value: 'id' },
      init: function (data) {
        data.current.options.clearAll()
        let tmp = [
          { id: 1, lab: 'qwe1' },
          { id: 2, lab: 'qwe2' },
          { id: 3, lab: 'qwe3' },
          { id: 4, lab: 'qwe4' },
        ]
        if (data.current.search === 's') {
          tmp = [{ id: 4, lab: 'qwe4' }]
        }
        tmp.forEach(i => {
          data.current.options.push(i)
        })
      },
      change: function (data) {
        // debugger
      },
    },
    selecttree: {
      type: 'selectTree',
      label: '下拉选择树',
      required: true,
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请选择'))
            } else {
              callback()
            }
          },
        },
      ],
      tree: [],
      checkStrictly: false,
      filterable: false,
      showcheckbox: false,
      onlyLeafNodeCanClick: true,
      prop: { label: 'lab', value: 'id', children: 'child' },
      init: function (data) {
        data.current.options.clearAll()
        let tmp = [
          {
            id: 1,
            lab: 'qwe1',
            child: [
              { id: 11, lab: 'qwe11' },
              { id: 12, lab: 'qwe12' },
              { id: 13, lab: 'qwe13' },
            ],
          },
          { id: 2, lab: 'qwe2' },
          { id: 3, lab: 'qwe3' },
          { id: 4, lab: 'qwe4' },
        ]
        tmp.forEach(i => {
          data.current.options.push(i)
        })
      },
      change: function (data) {
        // debugger
      },
    },
    selectLazyTree: {
      type: 'selectLazyTree',
      label: '下拉懒加载树',
      loadNode: function (data) {
        if (data.current.node.level === 0) {
          return data.current.resolve([
            {
              value: 1,
              label: '一级 11',
            },
            {
              value: 2,
              label: '一级 22',
            },
          ])
        }
        if (data.current.node.level > 1) return data.current.resolve([])
        setTimeout(() => {
          data.current.resolve([
            {
              value: 111,
              label: '一级 111',
            },
          ])
        }, 500)
      },
      change: function (data) {
        debugger
      },
    },
    date: {
      type: 'date',
      label: '时间选择',
      lineStyle: { clear: 'both' },
      readonly: false,
      disabled: false,
      clearable: true,
      showSlot: true,
      startPlaceholder: '开始提示',
      endPlaceholder: '结束提示',
      // dateType: 'time',
      // format: 'yyyy-MM-dd HH:mm:ss',
      // format: 'HH:mm:ss',
      devide: '/',
      pickerOptions: {
        //所有大于今天的日期禁用
        disabledDate(time) {
          return time.getTime() > Date.now()
        },
      },
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请选择'))
            } else {
              callback()
            }
          },
        },
      ],
      dateChange: function (data) {
        // debugger
      },
    },
    radioGroup: {
      type: 'radioGroup',
      label: '单选框',
      required: true,
      prop: { label: 'value', value: 'id' },
      options: [],
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请选择'))
            } else {
              callback()
            }
          },
        },
      ],
      init: function (data) {
        data.current.options.clearAll()
        let tmp = [
          {
            id: 1,
            custom: '自定义单选',
            slot: 'rrr' /*是否是自定义，并指定插槽名称*/,
            disabled: false,
            border: true,
          },
          { id: 2, value: '单选框2', disabled: false, border: false },
          { id: 3, value: '单选框3', disabled: false, border: false },
        ]
        tmp.forEach(i => {
          data.current.options.push(i)
        })
      },
      change: function (data) {
        // debugger
      },
    },
    checkGroup: {
      type: 'checkGroup',
      label: '多选框',
      required: true,
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请选择'))
            } else {
              callback()
            }
          },
        },
      ],
      prop: { label: 'value', value: 'id' },
      options: [],
      init: function (data) {
        data.current.options.clearAll()
        let tmp = [
          {
            id: 1,
            custom: '自定义多选',
            slot: 'sss' /*是否是自定义，并指定插槽名称*/,
            disabled: false,
            border: true,
          },
          { id: 2, value: '复选框2', disabled: false, border: false },
          { id: 3, value: '复选框3', disabled: false, border: false },
        ]
        tmp.forEach(i => {
          data.current.options.push(i)
        })
      },
      change: function (data) {
        // debugger
      },
    },
  }
  //组件示例
  options2 = {
    button: {
      type: 'button',
      label: '按钮',
      position: 'center', //left,center,right
      buttons: [
        {
          name: '单选标签加项',
          show: true,
          class: 'cpt_btn_blue_white cpt_margin_10',
          disable: false,
          click: function (data) {
            data.formOptions.tabs.list.push({ name: `name33`, id: `id33` })
            data.formRefs.tabs[0].activeItem(data.formOptions.tabs.list.length - 1)
          },
        },
        {
          name: '打印表单',
          show: true,
          class: 'cpt_btn_blue cpt_margin_10',
          style: { width: '100px' },
          click: function (data) {
            console.log(data.formData)
          },
        },
        {
          name: '可编辑div-加一项',
          show: true,
          class: 'cpt_btn_blue cpt_margin_10',
          style: { width: '150px' },
          click: function (data) {
            /* let tmp = [{ id: 889, label: '可编辑div4' }]
            tmp.forEach(item => {
              data.formRefs.editDiv[0].addElement(item)
            }) */

            let tmp2 = { id: 889, label: '可编辑div4' }
            data.formRefs.editDiv[0].addElement(tmp2)
          },
        },
        {
          name: '可编辑div-清空全部',
          show: true,
          class: 'cpt_btn_blue cpt_margin_10',
          style: { width: '150px' },
          click: function (data) {
            data.formRefs.editDiv[0].delAll()
          },
        },
        {
          name: '可编辑div-删除某一项',
          show: true,
          class: 'cpt_btn_blue cpt_margin_10',
          style: { width: '180px' },
          click: function (data) {
            let id = 889
            data.formRefs.editDiv[0].delItem(id)
          },
        },
        {
          name: '表格清除状态',
          class: 'cpt_btn_blue cpt_margin_10',
          style: { width: '180px' },
          click: function (data) {
            data.formRefs.table[0].clearState()
          },
        },
      ],
    },
    // luckysheet: {
    //   type: 'excel',
    //   vertical: true,
    //   style: { height: '600px' },
    //   lineStyle: { 'padding-bottom': '20px' },
    // },
    navMenu: {
      type: 'navMenu',
      label: '导航栏',
      style: { height: '50px' },
      click: function (data) {
        // debugger
      },
    },
    collapseMenu: {
      type: 'menu',
      label: '可折叠导航栏',
      style: { height: '100%' },
      prop: { label: 'label', value: 'value', children: 'children' },
      activeIndex: '11',
      menu: [
        {
          label: '导航1',
          value: '1',
          icon: 'icon-a-svg73',
          children: [
            {
              label: '选项1',
              value: '11',
            },
            { label: '选项2', value: '12' },
          ],
        },
        {
          label: '导航2',
          value: '2',
          icon: 'icon-a-svg42',
          children: [
            { label: '选项3', value: '21' },
            { label: '选项4', value: '22' },
          ],
        },
        {
          label: '导航3',
          value: '3',
          icon: 'icon-a-svg66',
          children: [
            { label: '选项5', value: '31' },
            { label: '选项6', value: '32' },
            { label: '选项7', value: '33' },
          ],
        },
        {
          label: '导航4',
          value: '4',
          icon: 'icon-a-svg35',
          children: null,
        },
      ],
      click: function (data) {
        // debugger
      },
      open: function (data) {
        // debugger
      },
      close: function (data) {
        // debugger
      },
    },
    editDiv: {
      label: '可编辑的div',
      type: 'editDiv',
      style: { height: '200px' },
      prop: { label: 'label', id: 'id' },
      padding: 0,
      height: 30,
      // fillColor: 'red',
      // fontSize: 20,
      // fontColor: '#e5e',
    },
    tabs: {
      type: 'tabs',
      label: '单选标签',
      prop: { name: 'name', id: 'id' },
      list: [...Array(4).keys()].map(i => {
        return { name: `name${i}`, id: `id${i}` }
      }),
      minWidth: 100,
      maxWidth: 150,
      showDelIcon: true,
      showNextIcon: true,
      tabClick: function (data) {
        console.log(JSON.stringify(data.current.select))
      },
      tabDel: function (data) {
        console.log(JSON.stringify(data.current.del))
      },
    },
    multabs: {
      type: 'multabs',
      label: '多选标签',
      prop: { name: 'name', id: 'id' },
      list: [...Array(33).keys()].map(i => {
        return { name: `name${i}`, id: `id${i}` }
      }),
      minWidth: 100,
      maxWidth: 150,
      showNextIcon: true,
      tabClick: function (data) {
        console.log(JSON.stringify(data.current.select))
      },
    },
    rich: {
      type: 'rich',
      label: '富文本编辑器',
      height: 500,
    },
    cron: {
      type: 'cron',
      label: 'cron表达式',
      disabled: false,
      style: { width: '100%' },
    },
    table: {
      lineClass: 'cpt_round_card',
      vertical: true,
      type: 'table',
      border: true,
      page: 1,
      size: 10,
      sizes: [10, 20, 50],
      total: 20,
      filterSingle: false, //全部条件同时筛选
      layout: 'total, sizes ,prev, pager, next, jumper',
      position: 'left', //center,left,right
      sizeChange(data) {
        this.size = data.current.size
        data.other.vue.getList()
      },
      pageChange(data) {
        this.page = data.current.page
        data.other.vue.getList()
      },
      sortChange(data) {
        this.order = data.current.order
        this.field = data.current.field
        data.other.vue.getList()
      },
      filterChange(data) {
        let that = this
        Object.keys(data.current.filters).forEach(i => {
          that[i] = data.current.filters[i].selectedValues.join(',')
        })
        data.other.vue.getList()
      },
      columns: [
        {
          prop: 'datasetName',
          label:
            '<span >数据集<span class="cpt_btn_ico icon-a-svg73" title="小提示"></span></span>',
          sortable: 'custom',
          width: 200,
          align: 'center', //left/center/right
          filters: [
            { text: 'qwe', value: 'qwe' },
            { text: 'asd', value: 'asd' },
          ],
          // minWidth: 1000,
          formatter: function formatter(data) {
            return `<div class="cpt_before_point_grey">${data.value}</div>`
          },
          event: function (data) {
            console.log(data)
          },
        },
        {
          prop: 'dataLinkName',
          label: '数据链接',
          filters: [
            { text: 'qwe1', value: 'qwe1' },
            { text: 'asd1', value: 'asd1' },
          ],
          minWidth: 200,
        },
        {
          prop: 'dataLinkName',
          label: '插槽',
          slot: 'customcolum',
          minWidth: 200,
        },
        {
          isOperation: true,
          label: '操作',
          fixed: 'right',
          width: 200,
        },
      ],
    },
    ehlCusTable: {
      type: 'ehlCusTable',
      title: '自定义表格',
      style: { height: '350px' },
      vertical: true,
      showCtrl: false,
      column: {
        check: {
          type: 'check',
          title: '勾选框',
          vertical: true,
          lineStyle: { display: 'flex', 'justify-content': 'center' },
          columnStyle: { 'min-width': '50px', 'max-width': '80px' },
        },
        index: {
          type: 'label',
          title: '序号',
          position: 'center',
          class: 'cpt_single_ellipsis',
          columnStyle: { 'min-width': '50px', 'max-width': '50px' },
          vertical: true,
        },
        label: {
          type: 'label',
          title: '纯展示/自定义',
          html: `<i class="el-icon-warning-outline" style="margin-left: 5px;cursor: pointer;" title="这里是提示"></i>`,
          default: '删除',
          position: 'center',
          class: 'cpt_single_ellipsis',
          columnStyle: { 'min-width': '50px' },
          vertical: true,
          click: function (data) {
            debugger
          },
        },
        input: {
          type: 'input',
          title: '输入框',
          class: 'cpt_placeholder_normal',
          suffixIcon: 'el-icon-search',
          vertical: true,
          columnStyle: { 'min-width': '50px' },
          change: function (data) {
            //动态更改输入框的提示文字颜色
            if (isEmpty(data.current.value)) {
              this.class = 'cpt_placeholder_error'
            } else {
              this.class = 'cpt_placeholder_normal'
            }
          },
        },
        select: {
          type: 'select',
          title: '选择框1',
          vertical: true,
          columnStyle: { 'min-width': '50px' },
          options: [],
          prop: { label: 'lab', value: 'id' },
          init: function (data) {
            data.current.options.clearAll()
            let tmp = [
              { id: 1, lab: 'qwe1' },
              { id: 2, lab: 'qwe2' },
            ]
            tmp.forEach(i => {
              data.current.options.push(i)
            })
          },
          change: function (data) {
            debugger
          },
        },
        button: {
          type: 'button',
          title: '操作',
          vertical: true,
          columnStyle: { 'min-width': '40px' },
          position: 'center', //left,center,right
          buttons: [
            {
              // name: '加项',
              class: 'cpt_btn_ico icon-a-svg73',
              click: function (data) {
                debugger
              },
            },
          ],
        },
      },
      addItem: function (data) {
        debugger
      },
      delItem: function (data) {
        debugger
      },
    },
    code: {
      type: 'code',
      label: '代码编辑器',
      required: true,
      theme: 'light',
      mode: 'sql',
      readonly: false,
      style: { height: '200px' },
      tool: {
        show: true, //总体是否显示
        max_min: true, //是否显示最大化
        format: true, //是否显示格式化
        clearable: true, //是否显示清空
        mode: true, //是否显示模式选择器
        lineNum: true, //是否显示行号
      },
      rule: [
        {
          required: true,
          validator: (rule, value, callback) => {
            if (isEmpty(value)) {
              callback(new Error('请输入'))
            } else {
              callback()
            }
          },
        },
      ],
    },
    upload: {
      type: 'upload',
      label: 'upload组件',
      hit: '*传点啥呗',
      fileList: [{ name: '123.aaa', url: 'asdasd' }],
      success: function (data) {
        data.current
      },
      error: function (data) {
        $message.error(data.current.err.message)
      },
      change: function (data) {
        data.current
      },
      remove: function (data) {
        data.current
      },
    },
    tiling: {
      label: '九宫格展示',
      type: 'tiling',
      style: { height: '200px', overflow: 'auto' },
      columns: 5,
    },
    editbox: {
      type: 'editbox',
      vertical: true,
      options: {
        input: {
          type: 'input',
          label(data) {
            return `q${data.current.formIndex}`
          },
          lineStyle: { 'margin-bottom': '20px' },
        },
        input1: {
          type: 'input',
          label: '输入框',
          lineStyle: { 'margin-bottom': '20px' },
        },
        input2: {
          type: 'input',
          label: '输入框',
          lineStyle: { 'margin-bottom': '20px' },
        },
        input3: {
          type: 'input',
          label: '输入框',
          lineStyle: { 'margin-bottom': '20px' },
        },
        input4: {
          type: 'input',
          label: '输入框',
          lineStyle: { 'margin-bottom': '20px' },
        },
        input5: {
          type: 'input',
          label: '输入框',
          lineStyle: { 'margin-bottom': '20px' },
        },
      },
      defaultValue: { input: '' },
    },
    page: {
      type: 'page',
      label: '分页展示',
      currentPage: 1,
      pageSizes: [10, 20, 50, 700],
      pageSize: 10,
      total: 100,
      layout: 'total, sizes, prev, pager, next, jumper',
      position: 'center',
      sizeChange: function (data) {
        debugger
      },
      pageChange: function (data) {
        debugger
      },
    },
    shuttle: {
      type: 'shuttle',
      vertical: true,
      style: { height: '300px' },
      prop: { label: 'label', value: 'label', children: 'children' },
      form: {
        options: {
          selectLazyTree: {
            type: 'selectLazyTree',
            style: { 'margin-bottom': '10px' },
            vertical: true,
            loadNode: function (data) {
              if (data.current.node.level === 0) {
                return data.current.resolve([
                  {
                    value: 1,
                    label: '一级 11',
                  },
                  {
                    value: 2,
                    label: '一级 22',
                  },
                ])
              }
              if (data.current.node.level > 1) return data.current.resolve([])
              setTimeout(() => {
                data.current.resolve([
                  {
                    value: 111,
                    label: '一级 111',
                  },
                ])
              }, 500)
            },
            change: function (data) {
              debugger
            },
          },
          tree: {
            type: 'tree',
            options: [],
            vertical: true,
            showAll: true,
            defaultExpandAll: false,
            // style: { height: '300px', width: '100%' },
            prop: { label: 'label', value: 'label' },
            enter: function (data) {
              debugger
              this.search(data)
            },
            init: function (data) {
              data.current.search = ''
              this.search(data)
            },
            clear: function (data) {
              data.current.search = ''
              this.search(data)
            },
            search: function (data) {
              data.current.options.clearAll()
              let tmp = [
                {
                  label: '一级 1',
                },
                {
                  label: '一级 2',
                },
              ]
              tmp.forEach(element => {
                data.current.options.push(element)
              })
            },
            nodeClick: function (data) {
              data.formRefs.tree[0].checkAll(true)
              debugger
            },
          },
          page: {
            type: 'page',
            vertical: true,
            page: 1,
            size: 10,
            total: 100,
            layout: 'total, prev, pager, next',
            position: 'center',
            small: true,
            pageChange: function (data) {
              debugger
            },
          },
        },
      },
      data: { selectLazyTree: [], tree: [] },
    },
    pdf: {
      type: 'pdf',
      vertical: true,
      url: 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
      page: 2,
      style: { width: '400px' },
    },
    step: {
      type: 'step',
      vertical: true,
      verticalMode: true,
      step: [
        { label: '标签项', value: 1, icon: '', tab: 0 },
        { label: '逻辑定义', value: 2, icon: '', tab: 1 },
        { label: '更新规则', value: 3, icon: '', tab: 2 },
      ],
      click: function (data) {
        // debugger
      },
    },
    tree: {
      label: '搜索树',
      vertical: true,
      type: 'tree',
      options: [],
      style: { height: '600px', width: '200px' },
      txtChange: function (data) {
        data.formRefs.tree[0].$refs[data.formRefs.tree[0].ref].filter(data.current.search)
      },
      init: function (data) {
        data.current.search = ''
        this.search(data)
      },
      clear: function (data) {
        data.current.search = ''
        this.search(data)
      },
      search: function (data) {
        data.current.options.clearAll()
        let tmp = [
          {
            label: '一级 1',
            children: [
              {
                label: '二级 1-1',
                children: [
                  {
                    label: '三级 1-1',
                  },
                  {
                    label: '三级 1-2',
                  },
                ],
              },
              {
                label: '二级 1-2',
              },
            ],
          },
          {
            label: '一级 2',
          },
        ]
        if (data.current.search === 'a') {
          tmp = [
            {
              label: '一级 1',
              children: [
                {
                  label: '二级 1-1',
                  children: [
                    {
                      label: '三级 1-1',
                    },
                  ],
                },
                {
                  label: '二级 1-2',
                },
              ],
            },
          ]
        }
        tmp.forEach(element => {
          data.current.options.push(element)
        })
      },
      nodeClick: function (data) {
        debugger
      },
    },
    lazyTree: {
      type: 'tree',
      label: '懒加载树',
      options: [{}],
      vertical: true,
      inputShow: true,
      showAll: false,
      checkbox: false,
      lazy: true,
      nodeKey: 'id',
      showTool: true,
      isLeafProp: 'children',
      defaultExpandAll: false,
      defaultExpandedKeys: [], //默认打开节点
      lineStyle: {},
      style: { width: '250px', height: '500px' },
      prop: { label: 'name', value: 'id', children: 'children' },
      loadNode: function (data) {
        if (data.current.node.level === 0) {
          return data.current.resolve([
            {
              id: 1,
              name: '一级 11',
            },
            {
              id: 2,
              name: '一级 22',
            },
          ])
        }
        if (data.current.node.level > 1) return data.current.resolve([])
        setTimeout(() => {
          data.current.resolve([
            {
              id: 111 + data.current.node.id,
              name: '一级 111',
            },
          ])
        }, 500)
      },
      nodeClick: function (data) {
        // debugger
      },
      nodeExpand: function (data) {
        this.defaultExpandedKeys.push(data.current.options.id)
      },
      nodeCollapse: function (data) {
        this.defaultExpandedKeys.splice(
          this.defaultExpandedKeys.indexOf(data.current.options.id),
          1,
        )
      },
    },
  }
  constructor(data) {
    super(data)
  }
}
